<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header"></div>
                        <div class="layui-card-body">
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">未处理</li>
                                    <li>已处理</li>
                                    <li>全部</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <table class="layui-hide" id="suggestion_no_manage"
                                               lay-filter="suggestion_no_manage"></table>
                                    </div>
                                    <div class="layui-tab-item">
                                        <table class="layui-hide" id="suggestion_yes_manage"
                                               lay-filter="suggestion_yes_manage"></table>
                                    </div>
                                    <div class="layui-tab-item">
                                        <table class="layui-hide" id="suggestion_all_manage"
                                               lay-filter="suggestion_all_manage"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="barDemoMark">
    <a class="layui-btn layui-btn-xs" lay-event="edit">标记</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="barDemoDelete">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    var mydata;
    var noDeal;
    var yesDeal;
    //发送异步请求
    jQuery.ajax({
        url: "/suggestions/all.do",
        type: "get",
        dataType: "json",
        contentType: "application/json;charset=utf-8"
    }).done(function (data) {
        mydata = data.all;
        yesDeal = data.yes;
        noDeal = data.no;
        for (var i = 0; i < mydata.length; i++) {
            mydata[i].time = stamp2Time(mydata[i].time / 1000);

        }
        for (var i = 0; i < yesDeal.length; i++) {
            yesDeal[i].time = stamp2Time(yesDeal[i].time / 1000);

        }

        for (var i = 0; i < noDeal.length; i++) {
            noDeal[i].time = stamp2Time(noDeal[i].time / 1000);

        }

        layui.use('table', function () {
            var table = layui.table
                , form = layui.form;
            table.render({
                elem: '#suggestion_no_manage'
                , data: noDeal
                , cellMinWidth: 80
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID', unresize: true, sort: true}
                    , {field: 'word', title: '建议内容', sort: true}
                    , {field: 'type', title: '建议类型', sort: true}
                    , {field: 'time', title: '建议时间', sort: true}
                    , {fixed: 'right', width: 178, align: 'center', toolbar: '#barDemoMark', title: "操作栏"}
                ]]
                , page: true
            });

            table.render({
                elem: '#suggestion_yes_manage'
                , data: yesDeal
                , cellMinWidth: 80
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID', unresize: true, sort: true}
                    , {field: 'word', title: '建议内容', sort: true}
                    , {field: 'type', title: '建议类型', sort: true}
                    , {field: 'time', title: '建议时间', sort: true}
                    , {fixed: 'right', width: 178, align: 'center', toolbar: '#barDemoDelete', title: "操作栏"}
                ]]
                , page: true
            });


            table.render({
                elem: '#suggestion_all_manage'
                , data: mydata
                , cellMinWidth: 80
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID', unresize: true, sort: true}
                    , {field: 'word', title: '建议内容', sort: true}
                    , {field: 'type', title: '建议类型', sort: true}
                    , {field: 'time', title: '建议时间', sort: true}
                    , {fixed: 'right', width: 178, align: 'center', toolbar: '#barDemoDelete', title: "操作栏"}
                ]]
                , page: true
            });


            //监听工具条
            table.on('tool(suggestion_no_manage)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        deleteSu(data.id);
                        obj.del();
                        layer.alert("成功", {icon: 2});
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    markid(data.id);
                    layer.alert("成功", {icon: 1});
                }
            });


            //监听工具条
            table.on('tool(suggestion_yes_manage)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        deleteSu(data.id);
                        obj.del();
                        layer.alert("成功", {icon: 1});
                    });
                } else if (obj.event === 'edit') {
                    markid(data.id);
                    layer.alert("成功", {icon: 2});
                }
            });

            //监听工具条
            table.on('tool(suggestion_all_manage)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        deleteSu(data.id);
                        obj.del();
                        layer.alert("成功", {icon: 1});
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    markid(data.id);
                }
            });

        });
    }).fail(function (data) {
        layer.alert("请求失败", {icon: 7});
        layer.close(layerIndex);
    });


    function stamp2Time(timestamp) {

        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }


    /**
     * 删除
     * @param id
     */
    function deleteSu(id) {
        jQuery.ajax({
            url: "/suggestions/delete.do?id=" + id,
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8"
        }).done(function (data) {


        }).fail(function (data) {
            layer.alert("请求失败", {icon: 7});
            layer.close(layerIndex);
        });
    }

    /**
     * 标记
     * @param id
     */
    function markid(id) {
        jQuery.ajax({
            url: "/suggestions/mark.do?id=" + id,
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8"
        }).done(function (data) {


        }).fail(function (data) {
            layer.alert("请求失败", {icon: 7});
            layer.close(layerIndex);
        });
    }
</script>